<template>
  <div style="min-height: 90vh;">
    <el-form style="padding-top: 20px;padding-bottom: 10px;text-align: center" :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="文章标题" prop="title">
        <el-input
            v-model="queryParams.title"
            placeholder="请输入文章标题"
            clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-empty v-if="articleList.length === 0" :image-size="370" />
    <el-table v-else v-loading="loading" :data="articleList" @selection-change="handleSelectionChange">
      <el-table-column label="标题" align="center" prop="title" />
      <el-table-column label="文章字数"  align="center" prop="wordNum" />
      <el-table-column label="点赞数量" align="center" prop="likeNum" />
      <el-table-column label="评论数量" align="center" prop="evaluate" />
      <el-table-column label="浏览数量" align="center" prop="see" />

      <el-table-column label="文章照片" align="center" prop="img" >
        <template #default="scope">
          <image-preview :src="scope.row.img" :width="50" :height="50"/>
        </template>
      </el-table-column>


      <el-table-column prop="status" label="文章状态"  align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status === '1'" type="info">待发布</el-tag>
          <el-tag v-else type="success">已发布</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="articleLabel" label="文章标签"  align="center">

      </el-table-column>

      <el-table-column label="操作" align="center" >
        <template #default="scope">
          <el-button  class="my-button" link type="primary" icon="Pointer" @click="jumpArticle(scope.row.id)" >查看</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" >删除</el-button>
          <el-button v-if="scope.row.status==='1'" link type="primary" icon="Edit" @click="handleEdit(scope.row)" >编辑</el-button>
        </template>
      </el-table-column>

    </el-table>
    <Paging style="padding-top: 50px" :articleTotal="articleTotal" :send-current="getCurrent" :send-size="getSize" />
  </div>
</template>
<script setup >
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import imagePreview from '@/components/articleDetil/ImagePreview/index.vue'
import router from "@/router/index.js";
import Paging from "@/components/paging/Paging.vue";
import {delArticle, listArticleByUserId} from "@/api/article.js";
import {getToken} from "@/utils/auth.js";
import {ElMessage} from "element-plus";
const showSearch = ref(true);
const articleTotal = ref(0)
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 5,
    title: null,
  },
  rules: {
  },
});
const { proxy } = getCurrentInstance();
const { queryParams } = toRefs(data);
const loading = ref(false);
const articleList = ref([]);

async function getCurrent(current){
  data.queryParams.pageNum = current
  getList();
}
async function getSize(size){
  data.queryParams.pageSize = size
  getList();
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}
/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  console.log("row111",row)
  proxy.$modal.confirm('是否确认删除文章为"' + row.title + '"的数据项？').then(function() {
    return delArticle(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
/**
 * 跳转文章详情
 */
function jumpArticle(id){
  router.push({
    name:'MDEditor',
    params:{
      articleId:id
    }
  })
}
/** 查询文章列表 */
function getList() {
  listArticleByUserId(queryParams.value).then(response => {
    if (response.data.code === 401){
      ElMessage.info("暂无数据")
    }else{
      articleList.value = response.data.rows;
      articleTotal.value = response.data.total;
      loading.value = false;
    }

  });
}

/** 重置按钮操作 */
function resetQuery() {
  data.queryParams.pageSize = 5
  data.queryParams.pageNum = 1
  data.queryParams.title = null
  handleQuery();
}

function handleEdit(row){
  router.push({
    name:"addArticle",
    params:{
      id : row.id
    }
  })
}
getList()
</script>

<style scoped>
.my-button{
  margin-left: 12px;
}
</style>